<template>
  <div class="ly-message" id="Message" v-if="prompt.state">
    <div class="ly-prompt" :class="prompt.className">
      <div class="ly-close" @click="closePopup"><i class="iconfont icon_closed"></i></div>
      <div class="ly-title">{{title}}</div>
      <div class="ly-all" v-loading="prompt.loading">
        <!--title string 新增  -->
        <div class="ly-content" v-if="prompt.type==='add'">
          <ul class="ly-list">
            <li>
              <label class="ly-label">父类类别：</label>
              <el-select class="ly-pu-select" v-model="parClass.type" placeholder="全部" @change="changeClient">
                <el-option v-for="item in prompt.data" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </li>
            <li>
              <label class="ly-label">分类名称：</label>
              <input type="text" class="ly-pu-input" placeholder="请输入分类名称" v-model="parClass.name"/>
            </li>
          </ul>
        </div>
        <!-- 按钮-->
        <div class="ly-submit" v-if="prompt.conserve">
          <span @click="closePopup" v-if="prompt.cancel">取消</span>
          <span class="ly-btn" @click="conserveData()">{{prompt.conserve}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script src="./js/message.js"></script>

<style lang="scss" scoped>
  .ly-content {
    width: 100%;
    padding: 30px 40px;

    .ly-list {
      width: 100%;

      li {
        line-height: 50px;
        height: 50px;
        position: relative;
        padding-left: 120px;

        label {
          &.ly-label {
            position: absolute;
            top: 0;
            left: 0;
            width: 110px;
            height: 50px;
            text-align: right;
          }
        }
      }
    }
  }

</style>